<template>
  <transition name="my-scale">
    <div class="seatOne">
      <div class="seat-title">
        {{oneSeat.peopleNum}}({{oneSeat.type}})
      </div>
      <div class="seat-body">
        <div
          :class="{
        'circle':true,
        'in-use': oneSeat.state.label ==='占用',
        'free': oneSeat.state.label==='可用',
        'stop-use': oneSeat.state.label==='停用',
        'in-dirty': oneSeat.state.label==='脏台'
      }">
          {{oneSeat.state.label}}
        </div>
      </div>
      <div class="seat-foot">
        <!--      改变某个桌号的状态-->
        <el-select v-model="typeval" size="mini" @change="changeItem">
          <el-option
            v-for="item in stateList"
            :key="item.value"
            :label="item.desc"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="seat-end">
        台号: {{oneSeat.number}}
      </div>
    </div>
  </transition>
</template>

<script>
  import {mapState,mapActions} from 'vuex'
  export default {
    name: "OneSeat",
    props: ['oneSeatProp'],
    data () {
      return {
        oneSeat: {},
        typeval: ''
      }
    },
    computed: {
      ...mapState('seats/',{
        stateList: state => state.stateList
      }),
      
    },
    inject: ['reload'],
    created() {
      this.oneSeat = this.oneSeatProp
      this.stateList.forEach(item => {
        if (item.value === this.oneSeat.state) {
          this.oneSeat.state = {
            value: item.value,
            label: item.desc
          }
          this.typeval = this.oneSeat.state.value
        }
      })
    },
    methods: {
      ...mapActions('seats/',['changeSeatState']),
      ...mapActions('bills/',['seatDownAC']),
      changeItem(val) {
        this.$confirm('确认修改餐桌的状态码?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let obj ={
            number: this.oneSeat.number,
            state: this.typeval
          }
          this.changeSeatState(obj).then(res=> {
            if (res.code === '200') {
              //修改该桌号的状态成功
              // 判断被修改的状态是不是  占用,是的话跳转点菜页面,不是指修改状态
              if (this.typeval === 2) {
                //将占用的桌号存起来,并且跳转点菜页面
                console.log(this.oneSeat.number)
                this.seatDownAC(this.oneSeat.number)
                this.$router.push('/takingOrder/'+this.oneSeat.number)
              } else {
                this.$message.success('修改状态成功')
                console.log('父组件注入: ',)
                this.reload()
              }
            }
          })
          
        }).catch(() => {
          this.typeval = this.oneSeat.state.value
          this.$message({
            type: 'info',
            message: '已取消修改'
          })
        })
      }
    }
  }

  //
  
  
</script>

<style lang="less" scoped>
 .my-scale-enter,
 .my-scale-leave-to {
 }
 .my-scale-enter-to,
 .my-scale-leave {
 }
 .my-scale-enter-active,
 .my-scale-leave-active {
 }
.seatOne {
  margin: 10px 0;
  width: 90%;
  cursor: pointer;
  border-radius: 5px;
  .seat-title {
    height: auto;
    background-color: #B2E1F7;
    line-height: 30px;
    text-align: center;
    border-radius: 5px 5px 0 0;
  }
  .seat-body {
    height: 80px;
    background-color: #E6EDF1;
    display: flex;
    justify-content: center;
    align-items: center;
    .circle {
      width: 80px;
      height: 80px;
      /*background-color: red;*/
      border-radius: 50%;
      text-align: center;
      line-height: 80px;
      &.free {
        background-color: rgba(31, 128, 74, 0.55);
      }
      &.in-use {
        background-color: rgba(255, 40, 35, 0.71);
      }
      &.in-dirty {
        background-color: antiquewhite;
      }
      &.stop-use {
        background-color: #909399;
      }
    }
  }
  .seat-end {
    text-align: center;
  }
}
</style>
